<template>
  <view class="message-container">
    <wd-img :src="user.avatar" round :width="50" :height="50"></wd-img>
    <view class="message-content">
      <p class="nickname">{{ user.nickname }}</p>
      <p class="message">{{ truncate(message, 50) }}</p>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

// 定义接收的props
const props = defineProps<{
  user: {
    avatar: string
    nickname: string
  }
  message: string
}>()

// 实现 truncate 方法
const truncate = (text: string, length: number = 100) => {
  return text.length > length ? text.slice(0, length) + '...' : text
}
</script>

<style lang="scss" scoped>
.message-container {
  display: flex;
  align-items: center;
  padding: 10px;
}

.message-content {
  margin-left: 12px;
}

.nickname {
  font-size: 16px;
  font-weight: bold;
}

.message {
  margin-top: 4px;
  font-size: 14px;
  color: #666;
}
</style>
